<template>
    <div>
        <div>
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="搜索学生实习记录..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
        </div>
        <div style="margin-top: 10px">
                <el-table   
                        :data="studentEvaluate"
                        stripe
                        border
                        style="width: 68%">
                    <el-table-column
                            prop="studentId" label="学号" width="130">
                    </el-table-column>
                    <el-table-column
                            prop="sname" label="姓名" width="75">
                    </el-table-column>
                    <el-table-column
                            prop="gender" label="性别" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="mname" label="专业" width="150">
                    </el-table-column>
                    <el-table-column
                            prop="level" label="学级" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="cname" label="班级" width="100">
                    </el-table-column>
                    <el-table-column 
                            prop="pname" label="实习岗位" width="130">
                    </el-table-column>
					<el-table-column
					        prop="score" label="评分" width="70">
					</el-table-column>
					<el-table-column label="操作">
					    <template slot-scope="scope">
					            <el-button @click="showAddView(scope.row)" style="padding: 8px" size="small" 
								type="primary" v-if="!scope.row.seId">开始评分</el-button>
					            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" 
								type="danger" v-if="scope.row.seId">修改评分</el-button>
					    </template>
					</el-table-column>
                </el-table>
            </div>
			<div style="width: 68%; display: flex; justify-content: flex-end;">
			    <el-pagination
					@current-change="currentChange"
					:current-page="current"
			        :page-size="size"
			        layout="total, prev, pager, next"
			        :total="total">
			    </el-pagination>
			</div>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="35%" center :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
				<div style="display: flex;justify-content: flex-start;">
					<el-form :model="evaluateInfo" :rules="rules" ref="evaluateForm" label-width="100px">
						<el-form-item label="给予评分" prop="score">
							<el-input size="small" clearable v-model="evaluateInfo.score" placeholder="请填写评分"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="doAddOrUpdate">确 定</el-button>
				</span>
			</el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
				studentEvaluate:[],
                keyword:'',
				current: 1,
				size: 10,
				total: 0,
				title: '',
				dialogVisible: false,
				destroyOnClose: false,
				evaluateInfo: {},
				rules: {
					score: [{required: true, message: '请填写评分', trigger: 'blur'}],
				}
            }
        },
		mounted() {
			this.initStudentEvaluate();
		},
        methods:{
			initStudentEvaluate(){
				let url = '/evaluate/student/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.studentEvaluate = resp.data;
						this.total = resp.total;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initStudentEvaluate();
			},
            doSearch(){
				this.current = 1;
				this.initStudentEvaluate();
            },
			showAddView(data){
				this.evaluateInfo = data;
				this.title = '开始评分';
				this.dialogVisible = true;
				this.destroyOnClose = true;
			},
			showEditView(data){
				this.title = '修改评分';
				this.evaluateInfo = data;
				this.dialogVisible = true;
			},
			emptyPositionInfo(){
				this.evaluateInfo = {};
			},
			doAddOrUpdate(){
				let theEvaluate = {};
				theEvaluate.sid = this.evaluateInfo.id;
				theEvaluate.score = this.evaluateInfo.score;
				if (this.evaluateInfo.seId) {
					theEvaluate.id = this.evaluateInfo.seId;
					this.$refs['evaluateForm'].validate(valid => {
						if (valid) {
							this.putRequest('/evaluate/student/', theEvaluate).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initStudentEvaluate();
								}
							})
						}
					});
				} else {
					this.$refs['evaluateForm'].validate(valid => {
						if (valid) {
							this.postRequest('/evaluate/student/', theEvaluate).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initStudentEvaluate();
								}
							})
						}
					});
				}
			},
			currentChange(val){
				this.current = val;
				this.initStudentEvaluate();
			},
        }
    }
</script>

<style scoped>
    .searchInput{
        width: 300px;
        margin-right: 8px;
    }
</style>